<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col
          :md="8"
          :sm="24">
          <a-form-item label="开始日期">
            <a-date-picker
              v-model="queryParam.startDate"
              style="width: 100%"
              placeholder="请输入开始日期" />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="24">
          <a-form-item label="结束日期">
            <a-date-picker
              v-model="queryParam.endDate"
              style="width: 100%"
              placeholder="请输入结束日期" />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="24">
          <span
            class="table-page-search-submitButtons"
            :style="{} ">
            <a-button
              type="primary"
              @click="search()">查询</a-button>
            <a-button
              style="margin-left: 8px"
              @click="resetSearchForm()">重置</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>

import moment from 'moment'

export default {
  name: 'SearchForm',
  components: {},
  props: {
    handleSearch: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      queryParam: {
        startDate: moment(),
        endDate: moment()
      }
    }
  },
  mounted () {
  },
  methods: {
    search () {
      this.handleSearch(this.queryParam)
    },
    resetSearchForm () {
      this.queryParam = {
        startDate: moment(),
        endDate: moment()
      }
      this.search(this.queryParam)
    }
  }
}
</script>
